<template>
  <a-drawer
    :title="title"
    :width="720"
    :visible="visible"
    :wrapStyle="{height: '100%',overflow: 'auto',paddingBottom: '108px'}"
    @close="close"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          v-if="parentRecord"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="上级分类"
        >
          <a-input disabled v-model="parentRecord.name"/>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="分类名称"
        >
          <a-input placeholder="请输入分类名称" v-decorator="[ 'name', {rules: [{ required: true, message: '请输入分类名称!' }]}]"/>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="分类编码"
        >
          <a-input placeholder="请输入分类编码" v-decorator="[ 'serialNo', {rules: [{ required: true, message: '请输入分类编码!' }]}]"/>
        </a-form-item>
      </a-form>
    </a-spin>

    <div class="drawer-bottom-button">
      <a-button :style="{marginRight: '8px'}" @click="close">取消</a-button>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">保存</a-button>
    </div>

  </a-drawer>

</template>

<script>
import pick from 'lodash.pick'
import { apiSaveCommodityVariety, apiUpdateCommodityVariety } from '@/api/commodity'

export default {
  name: 'VarietyModal',
  data () {
    return {
      title: '',
      visible: false,
      confirmLoading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      form: this.$form.createForm(this),
      model: {},
      parentRecord: null
    }
  },
  methods: {
    show (title, record, parentRecord) {
      console.log(parentRecord)
      this.form.resetFields()
      this.model = {}
      this.visible = true
      this.title = title
      this.parentRecord = parentRecord
      if (record) {
        this.model = Object.assign({}, record)
        this.initFormValue(record)
      }
    },
    initFormValue () {
      console.log(this.model)
      let fieldsVal = {}
      fieldsVal = pick(this.model, 'parantId', 'name', 'serialNo')
      this.$nextTick(() => {
        this.form.setFieldsValue(fieldsVal)
      })
    },
    close () {
      this.visible = false
    },
    handleSubmit () {
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log(values)
          const formData = pick(Object.assign(this.model, values), 'parantId', 'name', 'serialNo')
          formData.parentId = this.parentRecord ? this.parentRecord.id : null
          this.confirmLoading = true
          let obj
          if (this.model.id) {
            obj = apiUpdateCommodityVariety(this.model.id, formData)
          } else {
            obj = apiSaveCommodityVariety(formData)
          }
          obj.then((res) => {
            if (res.code === 1) {
              this.$message.success(res.msg)
              this.$emit('ok')
              this.close()
            } else {
              this.$message.warning(res.msg)
            }
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
